<template>
	<view class="detailsInfo">
		<view class="table">
			<view class="table_header">
				<view> 收款日期 </view>
				<view> 收款金额 </view>
				<view> 收款方式 </view>
				<view> 优惠 </view>
				<view> 备注 </view>
				<view> 操作 </view>
				<block v-for="(item,index) in list" :key="index">
					<view class="payDay">
						{{item.payDay.slice(5,10)}}
					</view>
					<view>{{item.realAmt}}
						<image class="zuofei" v-if="item.stt=='3'" mode="aspectFit"
							:src="resBaseUrl + '/index/zuofeiicon.png'" alt="" />
					</view>
					<view>{{arr[item.payChannel]}}</view>
					<view class="">
							{{item.discountAmt || 0}}
					</view>
					<view class="">
					    {{item.remark}}
					</view>
					<view class="btn" @tap="dele(item)"> 作废 </view>
				</block>
			</view>

		</view>
	</view>
</template>

<script>
import payType from "../../utils/payType";
	export default {
		data() {
			const _this = this
			return {
				list: [],
				resBaseUrl: _this.resBaseUrl,
				cid: "",
				orderDay: "",
				arr: payType
			};
		},
		props: ["data", "type"],
		onShow() {
			this.$api.InorderReportlistDetailApi({
				data: {
					cid: this.cid,
					orderDay: this.orderDay
				}
			}).then(res => {
				this.list = res.result.list
			})
		},
		onLoad(option) {
			this.cid = option.cid
			this.orderDay = option.orderDay
		},
		methods: {
			dele(item) {
				console.log(item)
				if (item.stt == '3') {
					uni.showToast({
						title: "该记录已作废",
						icon: "none"
					})
				} else {
					let that = this
					uni.showModal({
						content: "确定要作废吗？",
						success(res) {
							if (res.confirm) {
								that.$api.lowOrderSaleDeleteApi({
									id: item.id
								}).then(res => {
									that.$api.InorderReportlistDetailApi({
										data: {
											cid: that.cid,
											orderDay: that.orderDay
										}
									}).then(res => {
										that.list = res.result.list
									})
								})
							}
						}
					})
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.detailsInfo {
		// background-color: aqua;
		padding: 30rpx;

		.table {
			min-height: 300rpx;
			background: #fff;
			border-radius: 20rpx;

			.table_header,
			.table_body {
				display: grid;
				text-align: center;
				grid-template-columns: repeat(6, auto);
				margin: 20rpx 0;
			}

			.table_header {
				font-size: 30rpx;
				border-bottom: 1px solid #bdbdbd;

				view {
					height: 80rpx;
					line-height: 80rpx;
				}
			}

			.table_body {
				view {
					height: 60rpx;
					line-height: 60rpx;
					// border-right: 1rpx solid red;
					// border-left: 1px solid #eee;
					// border-bottom: 1px solid #eee;
					// border-right: 1px solid #eee;
				}


			}
		}
	}

	.btn {
		background: rgb(254, 52, 48);
		border-radius: 20rpx;
		width: 100rpx;
		height: 60rpx !important;
		line-height: 60rpx !important;
		color: #fff;
		text-align: center;
		margin: auto;
	}

	.zuofei {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		margin-top: 0rpx;
		margin-left: -30rpx;
	}

	// .payDay{
	// 	font-size: 20rpx;
	// 	line-height: 10rpx;
	// }
</style>
